<template>
  <div class="task-picture-detail-task">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="order-label">任务等级/类型：</div>
        <div class="order-value">
          <div class="order-value level">
            {{ taskPriority }}
          </div>
          <div class="task-types">
            <span v-for="(item, index) in taskTypes" :key="index">
              {{ item }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="order-label">产品类型：</div>
        <div class="order-value">{{ productType }}</div>
      </el-col>
      <el-col :span="8">
        <div class="order-label">涉及品牌：</div>
        <div class="order-value">
          {{ detail.brand_id ? detail.brand_id.join(",") : detail.brand_id }}
        </div>
      </el-col>
      <el-col :span="8">
        <div class="order-label">预期完成时间：</div>
        <div class="order-value">{{ detail.expected_time }}</div>
      </el-col>
      <el-col :span="8">
        <div class="order-label">图片数量：</div>
        <div class="order-value">{{ detail.image_total }}</div>
      </el-col>
      <el-col :span="24">
        <div class="order-label">任务备注：</div>
        <div class="order-value">{{ detail.task_remark }}</div>
      </el-col>
    </el-row>
    <div class="files">
      <span class="label-title">附件</span>
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item, index) in detail.task_file" :key="index">
          <svg-icon icon-class="file" style="color: #ececec" />
          <el-tooltip :content="item.name" placement="top">
            <span class="file-name truncate">{{ item.name }}</span>
          </el-tooltip>
          <span class="a-down" @click="handleDown(item)">下载</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { downloadFile } from "@/utils/downloadFile.js";

const props = defineProps({
  detail: {
    type: Object,
    default: {},
  },
});

let options = reactive(inject("options"));

const productType = computed(() => {
  const _find = options.value["assignment.ImagesAssignment"]?.[0].productTypeText.find(
    (v) => v.value === props.detail.product_type
  );
  return _find ? _find.label : "";
});

const taskPriority = computed(() => {
  const _find = options.value["assignment.ImagesAssignment"]?.[0].priorityText.find(
    (v) => v.value === props.detail.task_priority
  );
  return _find ? _find.label : "";
});

const taskTypes = computed(() => {
  const _finds = options.value[
    "assignment.ImagesAssignment"
  ]?.[0].taskTypeText.filter((v) => props.detail.task_type.includes(v.value));
  const res = _finds.map((v) => v.label);
  return res;
});

const handleDown = ({ url, name }) => {
  downloadFile(url, name, false);
};
</script>

<style lang="scss" scoped>
.task-picture-detail-task {
  .el-col {
    padding-bottom: 16px;
  }
  .order-label {
    width: 110px;
    text-align: right;
    color: #999;
  }
  .order-value {
    color: #333;
  }
  .order-label,
  .order-value {
    display: inline-block;
  }
  .order-value.level {
    background: #e50113;
    width: 13px;
    height: 13px;
    line-height: 13px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    //padding: 2px;
  }
  .files {
    .file-name {
      width: 80%;
    }
    .label-title {
      margin-bottom: 5px;
    }
    .el-col {
      display: flex;
      align-items: center;
      .a-down {
        margin-left: 5px;
        cursor: pointer;
        color: #3487ff;
      }
    }
  }
  .task-types {
    display: inline-block;
    span {
      margin-left: 4px;
      padding: 4px 8px;
      border-radius: 4px;
      background: #eeeeee;
      font-size: 12px;
      color: #333333;
      display: inline-block;
    }
  }
}
</style>
